<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="flex-container">
				<view class="name">持卡人姓名:</view>
				<input class="inp" placeholder="请填写持卡人姓名" maxlength="8" v-model="name" placeholder-style="font-size:26rpx;overflow: inherit;text-align: right;" />
			</view>
			<view class="flex-container">
				<view class="name">银行卡号:</view>
				<input class="inp" placeholder="请填写银行卡卡号" maxlength="20" type="number" v-model="bank" placeholder-style="font-size:26rpx;overflow: inherit;text-align: right;" />
			</view>
		</view>
		<view class="but">
			<button class="but1" v-if="name==''||bank==''">下一步 </button>
			<button class="active" v-else @click="addcall">下一步 </button>
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "添加银行账户",
			name: '',
			bank: ''
		}
	},
	onLoad() {
		that = this
	},
	methods: {
		addcall() {
			uni.navigateTo({
				url: "./cellnumber?name=" + that.name + "&bank=" + that.bank
			})
		}
	}
}
</script>
<style  scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	.box {
		background: #ffffff;
		.flex-container {
			width: 100%;
			background-color: #ffffff;
			padding: 10rpx 30rpx;
			margin-top: 14rpx;
			.name {
				display: inline-block;
				width: 30%;
				position: relative;
				top: -8rpx;
			}
			.inp {
				display: inline-block;
				width: 70%;
			}
		}
	}
	.but {
		width: 100%;
		position: fixed;
		bottom: 200rpx;
		.but1 {
			width: 90%;
			background: #d6d6d6;
			border-radius: 8rpx;
			font-weight: 400;
			color: #ffffff;
		}
		.active {
			width: 90%;
			background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
			border-radius: 8rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
}
</style>
